<html>
<head>
    <meta charset="utf-8">
    <title>React 学习！！</title>
</head>
<body>
<div id="app"></div>
<script src="../bower_components/react/react.min.js"></script>
<script src="../bower_components/react/react-dom.min.js"></script>
<script src="../bower_components/react/browser.min.js"></script>
<script type="text/javascript" src="../js/styleSheets.js"></script>
<script type="text/babel">
    /*
      1.尝试将样式直接写入jsx的标签对象中去查看结果
      2.React行内样式都是以Json形式存在的
      3.尝试将样式声明成变量，然后在标签中用属性设置方式进行调用
      4.对比原生行内样式控制的font-size:30px与react的行内样式fontSize的比较，
      在react中需要将-符号去除，然后将后面单词首字母进行大写操作

      问题：在jsx中，标签对象内容层次结构复杂，并不仅限于一个层次，层次嵌套及每个对象下都包含其样式属性，那又需要如何思考？
      5.基于全局变量或者在组件原型链上面进行挂载
     */
    var MessageBox = React.createClass({
      render:function(){
        return (  <div style={styleSheets.div}>
                    <h1 style={styleSheets.h1}>Hello React!</h1>
                    <p style={styleSheets.p}>React content message</p>
                  </div>
               )
      }
    });
    ReactDOM.render( <MessageBox/>, 
      document.getElementById('app'),
      function(){
        console.log('渲染完成啦！！');
      }
    )
</script>
</body>
</html>